<template>
   <div class="centen">
        <div class="top">
            <img src="/static/imgs_s05/s05_bg.png" alt="">
            <img src="/static/imgs_s05/s05_bg1.png" alt="">
            <h2>下单成功</h2>
            <p>订单已生成!可返回查看!</p>
            <span class="top1">返回首页</span>
            <span class="top2">查看订单</span>
        </div>
        <div class="ht">
            <div class="ht1">
                <img src="/static/imgs_s05/s05_bg 2.png" alt="">
            </div>
            <span>更多推荐</span>
            <div class="ht2">
                <img src="/static/imgs_s05/s05_bg 2.png" alt="">
            </div>
        </div>

        <div class="sp">
            <div class="spp">
                <div class="sp1">
                    <img src="/static/imgs_s05/s05_jxb.png" alt="">
                    <p>江小白JOYYOUTH 500ml*4瓶 40度清香型白酒</p>
                    <span>￥13.90</span>
                </div>

                <div class="sp1 c">
                    <img src="/static/imgs_s05/s05_m.png" alt="">
                    <p>三养 (SAMYANG) 火鸡面超辣鸡肉味拌面700g方便面</p>
                    <span>￥13.90</span>
                </div>
            </div>

            <div class="spp1">
                <div class="sp1">
                    <img src="/static/imgs_s05/s05_jxb.png" alt="">
                    <p>江小白JOYYOUTH 500ml*4瓶 40度清香型白酒</p>
                    <span>￥13.90</span>
                </div>

                <div class="sp1 c">
                    <img src="/static/imgs_s05/s05_m.png" alt="">
                    <p>三养 (SAMYANG) 火鸡面超辣鸡肉味拌面700g方便面</p>
                    <span>￥13.90</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
  data () {
    return {
      
      }
    },

  methods: {
   
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
        .centen {
            /* overflow: hidden; */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            background: #EEE;
        }

        .top {
            /* overflow: hidden; */
            position: relative;
            width: 100%;
            height: 210px;
            /* margin-bottom: 11px; */
        }

        .top img:nth-child(1) {
            width: 100%;
            height: 210px;
            z-index: 1;
            position: absolute;
        }

        .top img:nth-child(2) {
            width: 39px;
            height: 39px;
            position: absolute;
            z-index: 2;
            left: 98px;
            top: 74px;
        }

        .top h2 {
            position: absolute;
            font-size: 18px;
            /* font-family: Source Han Sans CN; */
            font-weight: bold;
            color: rgba(254, 254, 254, 1);
            line-height: 12px;
            z-index: 3;
            top: 74px;
            left: 160px;
        }

        .top p {
            position: absolute;
            z-index: 4;
            font-size: 12px;
            /* font-family: Source Han Sans CN; */
            font-weight: 400;
            color: rgba(254, 254, 254, 1);
            line-height: 12px;
            top: 104px;
            left: 160px;
        }

        .top1 {
            position: absolute;
            z-index: 5;
            width: 112px;
            height: 29px;
            border: 1px solid rgba(192, 225, 123, 1);
            border-radius: 14px;
            font-size: 13px;
            font-weight: 400;
            color: rgba(192, 225, 123, 1);
            line-height: 29px;
            text-align: center;
            left: 51px;
            top: 147px;
        }

        .top2 {
            position: absolute;
            z-index: 5;
            width: 112px;
            height: 29px;
            border: 1px solid rgba(192, 225, 123, 1);
            border-radius: 14px;
            font-size: 13px;
            font-weight: 400;
            color: #0A844C;
            /* color: rgba(192, 225, 123, 1); */
            line-height: 29px;
            text-align: center;
            right: 51px;
            top: 147px;
            background: #C0E17B;
        }

        .ht {
            display: flex;
            justify-content: space-around;
            font-size: 13px;
            height: 38px;
            line-height: 38px;
            font-weight: 500;
            color: rgba(50, 177, 108, 1);
        }

        .ht img {
            width: 138px;
            height: 1px;
        }

        .ht span {
            margin: 0 14px 0 14px;
        }

        .sp {
            display: flex;
            flex-direction: column;
            width: 375px;
            flex-wrap: wrap;
        }

        .sp1 {
            width: 178px;
            height: 254px;
            background: rgba(255, 255, 255, 1);
            border-radius: 9px;
            margin-left: 6px;
          
            margin-bottom: 7px;
        }

        .sp .sp1 img {
            width: 165px;
            height: 165px;

        }

        .sp1 p {

            width: 153px;
            display: inline-block;
            font-size: 12px;
            font-family: "Source Han Sans CN";
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            margin-top: 9px;
            margin-left: 8px;
            margin-bottom: 18px;
        }

        .sp1 span {
            margin-left: 6px;
            /* width: 47px;
            height: 11px; */
            font-size: 14px;
            font-family: "Source Han Sans CN";
            font-weight: 500;
            color: rgba(247, 83, 88, 1);

        }
        .sp .spp{
            display: flex;
            flex-direction: row;
        }
        .sp .spp1{
            display: flex;
            flex-direction: row;
        }
    </style>
